<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>分类</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
		</script>
	</head>
	<body>
		<div id="app">
			<session>
				<van-row>
					<!--左侧-->
					<van-col span="6">
						<van-badge-group :active-key="activeKey" @change="onChange">							
							<!--遍历分类列别-->
							<van-badge @click="change(item)" :title="item.Name" v-for="item in Categories"></van-badge>
						</van-badge-group>
					</van-col>
					<!--右侧-->
					<van-col span="18">
						<van-col span="12" v-for="item in products">
							<div style="width:100%">
								<img v-lazy="item.GoodsImageUrl" style="width:100%;" alt="" />
							</div>
							<div>{{item.Name}}</div>
							<div style="color:red;">￥{{item.MarketPrice}}</div>
							<div style="font-size:12px;margin-top:5px;color:dimgrey;">{{item.VirtualSaleCount}} 销量</div>
							<div style="font-size:12px;margin-top:5px;color:dimgrey;">{{item.BrowseCount}} 次浏览</div>
						</van-col>
					</van-col>
				</van-row>
			</session>			
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				error: "../img/shopping_default_3.jpg"
			});
			var vm = new Vue({
				el: '#app',
				data: {
					activeKey: 2, //默认为酒水饮料
					Categories: [], //产品分类列别
					products: [] //对应种类产品

				},
				methods: {
					//点击分类列别改变
					onChange: function(key) {
						this.activeKey = key;
					},
					//对应分类选项产品改变
					change: function(item) {
						this.getProduct(this.Categories[this.activeKey].Id)
					},
					//获取分类列别
					getCategories: function() {
						var _this = this;
                         //分类列表
						ajax({
							url: "http://dsapi.ysd3g.com/api/Categories",
							dataType: "jsonp",
							success: function(res) {
								_this.Categories = res.Categories;
								_this.getProduct(_this.Categories[_this.activeKey].Id)
							}

						});
					},
					//获取分类产品
					getProduct: function(id) {
						var _this = this;
						//根据分类Id获取产品列表
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsByCategoryId",
							dataType: "jsonp",
							data: {
								typeId: id,
								p: 1
							},
							success: function(res) {
								_this.products = res.Data;
							}

						});
					}
				},
				created() {
					this.getCategories();
				}
			});
		</script>
	</body>
</html>
